<template>
  <div class="user">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="search-input">
        <el-input
          v-model="searchValue"
          placeholder="用户名"
          size="small"
        ></el-input>
        <el-button type="primary" @click="search" size="small"
          >搜索</el-button
        >
        <el-button type="warning" size="small" @click="addusermsg">添加</el-button>
      </div>

      <!-- <div class="search-input">
        <el-button type="danger" size="small">批量删除</el-button>
      </div> -->
    </div>
    <!-- table -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" width="50">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="年龄" width="100">
        <template slot-scope="scope">{{ scope.row.age }}</template>
      </el-table-column>
      <el-table-column label="会员" width="160">
        <template slot-scope="scope">{{ scope.row.major }}</template>
      </el-table-column>
      <el-table-column label="来源地址" width="300">
        <template slot-scope="scope">{{ scope.row.address }}</template>
      </el-table-column>
      <el-table-column label="是否到期" width="100">
        <template slot-scope="scope">{{ scope.row.pay==0?"到期":"未到期" }}</template>
      </el-table-column>
      <el-table-column label="注册时间" width="150">
        <template slot-scope="scope">{{ scope.row.graduateTime }}</template>
      </el-table-column>
      <el-table-column width="260" label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="editFn(scope.row)"
            >编辑</el-button
          >
          <!-- <el-button type="warning" size="small" @click="delFn(scope.$index, scope.row)"
            >删除</el-button> -->
            <el-button type="warning" size="small"  @click="open(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="total"   @current-change="changeFn" @prev-click="preFn" @next-click="nextFn">
    </el-pagination>


    <!-- 模态框 -->
    <el-dialog
 
  :visible.sync="dialogVisible"
  width="30%"
  
  >
  <!-- <div>
        <p>
          <el-input v-model="currentItem.name"></el-input>
        </p>
        <p>
          <el-input v-model="currentItem.age"></el-input>
        </p>
        <p>
          <el-input v-model="currentItem.major"></el-input>
        </p>
        <p>
          <el-input v-model="currentItem.address"></el-input>
        </p>
        <p>
          <el-input v-model="currentItem.pay"></el-input>
        </p>
        <p>
          <el-input v-model="currentItem.graduateTime"></el-input>
        </p>
      </div> -->
      
      <el-form >
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="currentItem.name" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
      <el-input v-model="currentItem.age" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="会员等级" :label-width="formLabelWidth">
        <el-select v-model="currentItem.major" placeholder="选择会员等级" >
        <el-option label="黄金会员" value="黄金会员" selected></el-option>
        <el-option label="钻石会员" value="钻石会员"></el-option>
        <el-option label="黑金会员" value="黑金会员"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="家庭地址" :label-width="formLabelWidth">
      <el-input v-model="currentItem.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="会员状态" :label-width="formLabelWidth">
      <el-select v-model="currentItem.pay" placeholder="会员状态选择" >
        <el-option label="到期" value="到期" selected></el-option>
        <el-option label="未到期" value="未到期"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="注册时间" :label-width="formLabelWidth">
       <el-date-picker type="date" value-format='yyyy-MM-dd' placeholder="选择日期" v-model="currentItem.graduateTime" style="width: 100%;"></el-date-picker>
    </el-form-item>
  </el-form>  
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSure">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
//方法的引入
import { getuserlist,deleteuser,edituser,adduser } from "../../utils/https";
export default {
  name: "",
  props: [""],
  data() {
    return {
      tableData: [],
      searchValue: "",
      page: 1,
      size: 10,
      // total:0,
      total:0,
      //模态框显示
      dialogVisible:false,
      currentItem:{},
      formLabelWidth:"90px",
      btnStatus: "add", // 按钮状态确认
      
    
    };
  },

  components: {},

  computed: {},

  created() {
     this.getlist()
  },

  mounted() {},

  methods: {
   
    getlist() {
      getuserlist({
        searchValue: this.searchValue,
        size: this.size,
        page: this.page,
      }).then((res) => {
        // console.log(12,res);
        this.tableData = res.data;
        this.total=res.totalpage
      });
    },
     search() {
      this.getlist();
    },
    //编辑
    editFn(item) {
      this.dialogVisible=true,
      this.currentItem=item
      this.btnStatus = "edit";
    },
    //编辑确认
    editSure(){
      this.dialogVisible=false
      if(this.btnStatus == "eidt"){
        edituser(this.currentItem).then(res=>{
        // console.log(res);
        if(res.code==200){
          
            this.$message({
            type: 'success', // success error warning
            message: '修改成功',
            duration: 1000,
          })
          this.getlist();
        }
      })
      }else {
        // 点击添加确认
        adduser(this.currentItem).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
            type: 'success', // success error warning
            message: '添加成功',
            duration: 1000,
          })
            this.getlist();
          }
        });
      }
      
    },
    
    // delFn(index,item) {
    //   console.log(11,item);
    //   deleteuser({id:item.id}).then(res=>{
    //     // console.log(res);
    //     if(res.code==200){
    //       this.getlist();
    //       this.$message({
    //         type: 'success', // success error warning
    //         message: '删除成功',
    //         duration: 1000,
    //       })
    //     }
    //   })
    // },
    //删除
      open(index,item) {
          this.$confirm('确定删除用户信息么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           deleteuser({id:item.id}).then(res=>{
        // console.log(res);
        if(res.code==200){
          this.getlist();
          this.$message({
            type: 'success', // success error warning
            message: '删除成功',
            duration: 1000,
          })
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        
    //增加用户
    addusermsg(){
      this.btnStatus = "add"
      this.dialogVisible=true
      this.currentItem={}
    },
    //分页
    changeFn(val){
      // console.log(13,val);
      this.page=val
      this.getlist()
    },
    preFn(val){
      this.page=val
      this.getlist()
    },
    nextFn(val){
      this.page=val
      this.getlist()
    }
  },
};
</script>
<style scoped lang="less">
.user {
  
  // overflow: auto;
  .search-container {
    height: 60px;
    // margin: 0 0 20px;
    // padding: 0px 18px 0px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .search-input {
      display: flex;
      align-items: center;
    }
    /deep/.el-input__inner {
      width: 163px;
      height: 30px;
      margin-right: 15px;
    }
  }
  // .content .el-input {
  //   margin: 5px 0;
  // }
  .el-table {
    height: 100%;
    .el-table-column {
    }
    /deep/.el-table__header-wrapper {
      line-height: 10px;
    }
  }
  .el-pagination{
    line-height: 1;
    display: flex;
  }
  .el-form {
    .el-select,.el-input{
      width: 100%;
    }
  }
}
/* @import url(); 引入css类 */
</style>